<template>
	<view class="xt-radio-item-main" :class="[{'xt-radio-border':bottom}]" :style="{
	justifyContent: endAlignment ? 'space-between' : ''
	}">
		<view :class="['xt-radio-item']" :style="{
			'borderRadius': round ? '50%' : '8rpx',
			width: handleHeight(size),
			height:handleHeight(size),
			'backgroundColor': checked  ? activeColor : inactiveColor,
			'borderColor': checked ? activeColor : '#cccdcf',
			order: labelAlign == 'right' ? -1 : 1
		}" @tap="onClick">
			<text v-if="checked" class="xt-radio-icon" :style="{
					'fontSize': handleHeight(size,'px',0.8),
					'color': iconColor,
				}">✔</text>
		</view>
		<view class="xt-radio-text" :style="{
			'lineHeight': handleHeight(size),
			height: handleHeight(size),
			'order': labelAlign == 'right' ? 1 :-1
		}" @tap="onClick">
			<text :style="{
				'fontSize': handleHeight(size),
				'color': labelColor,
			}">{{label}}</text>
		</view>
	</view>
</template>
<script>
	import props from "./props.js";
	/**
	 * Radio 单选框
	 * @description 本组件提供一个单选框的功能，让开发者开发起来更加得心应手。减少重复的模板代码
	 * @tutorial https://ext.dcloud.net.cn/plugin?name=xt-radio
	 *
	 * @property {String}          						label             	提示文字
	 * @property {String | Number | Boolean}          	value             	选中值
	 * @property {Boolean}          					disabled            是否禁用(默认 false)
	 * @example <xt-radio-item></xt-radio-item>
	 */
	export default {
		name: "xt-radio-item",
		mixins: [props],
		data() {
			return {
				checked: false,
				size: '36rpx',
				iconColor: '#ffffff',
				round: false,
				activeColor: '#007aff',
				inactiveColor: '#fff',
				labelColor: '#000',
				isClick: true,
				bottom: false,
				labelAlign: 'right',
				endAlignment: '',
				parents: null
			};
		},
		methods: {
			init() {
				const parent = this.parents;
				this.size = parent?.size || this.size
				this.round = parent?.round || this.round
				this.labelColor = parent?.labelColor || this.labelColor
				this.iconColor = parent?.iconColor || this.iconColor
				this.inactiveColor = parent?.inactiveColor || this.inactiveColor
				this.activeColor = parent?.activeColor || this.activeColor
				this.labelAlign = parent?.labelAlign || this.labelAlign
				this.endAlignment = parent?.endAlignment || this.endAlignment
				if (parent?.disabled) {
					this.isClick = false
				}
				if (this.disabled) {
					this.isClick = false
				}
				if (parent?.placement == 'column' && parent?.borderBottom) {
					this.bottom = true
				}
				if (this.value === parent.value) {
					this.checked = true
				}
			},
			handleHeight(value = 'auto', unit = 'px', count) {
				const regular = /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/;
				const unitRegex = /^(\d+)([a-zA-Z]+)$/;
				if (typeof value === 'string' && unitRegex.test(value)) {
					// 提取数字和单位部分
					const match = value.match(unitRegex);
					const numberValue = match[1]; // 数字部分
					const existingUnit = match[2]; // 单位部分
					// 如果数字部分是有效的，则返回数字 + 单位
					if (regular.test(numberValue) && count) {
						return `${parseInt(numberValue) * count}${existingUnit}`;
					} else {
						return `${numberValue}${existingUnit}`;
					}
				} else {
					if (count) {
						return `${parseInt(value) * count}${unit}`;
					} else {
						return `${value}${unit}`;
					}
				}
				return value
			},
			onClick() {
				if (!this.isClick) return;
				// #ifdef WEB
				const parent = this.$parent.$parent;
				// #endif
				// #ifndef WEB
				const parent = this.$parent;
				// #endif
				parent?.updateValue(this.value);
			},
			getParent(name = undefined) {
				let parent = this.$parent
				while (parent) {
					// 父组件
					if (parent.$options && parent.$options.name !== name) {
						// 如果组件的name不相等，继续上一级寻找
						parent = parent.$parent
					} else {
						return parent
					}
				}
				return false
			},
			getParentData(parentName = '') {
				// 避免在created中去定义parent变量
				if (!this.parent) this.parent = {}
				this.parent = this.getParent.call(this, parentName)
				if (this.parent.children) {
					// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
					this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
				}
				const parent = this.parent;
				this.parents = {
					value: parent?.value || parent?.modelValue,
					disabled: parent.disabled,
					size: parent.size,
					iconColor: parent.iconColor,
					round: parent.round,
					activeColor: parent.activeColor,
					inactiveColor: parent.inactiveColor,
					labelColor: parent.labelColor,
					bottom: parent.bottom,
					labelAlign: parent.labelAlign,
					endAlignment: parent.endAlignment,
					borderBottom: parent.borderBottom,
					placement: parent.placement,
				}
				this.init()
			},
		},
		mounted() {
			this.getParentData('xt-radio')
		},
	};
</script>
<style scoped>
	@import "./style.css";
</style>